<template>
  <div class="footer">
    <span class="todo-count">共0条未完成任务</span>
    <ul class="filters">
      <li>
        <a href="#" class="selected">所有</a>
      </li>
      <li>
        <a href="#" class="">待办</a>
      </li>
      <li>
        <a href="#" class="">完成</a>
      </li>
    </ul>
  </div>
</template>

<script setup>

</script>

<style>
.footer {
  text-align: center;
  padding: 10px 20px;
  font-size: 15px;
}
.todo-count{
float:left;
position: relative;
top: 18;
font-size: 20px;
}
.filters{
  list-style: none;
  float: right;
}
.filters li{
  display: inline;
}
.filters li a{
  margin-left: 20px;
  text-decoration: none;
  display: inline-block;
  border:1px solid black;
  width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
color: black;
font-weight: bolder;
}
.filters li a:hover{
  color: red;
}
</style>
